<template>
    <div class="space-y-4">
        <div>
            <label class="block mb-1">姓名:</label>
            <input :value="name" @input="$emit('update:name', ($event.target as HTMLInputElement)?.value)"
                class="border rounded px-2 py-1 w-full">
        </div>

        <div>
            <label class="block mb-1">邮箱:</label>
            <input :value="email" @input="$emit('update:email', ($event.target as HTMLInputElement)?.value)"
                class="border rounded px-2 py-1 w-full">
        </div>
        <hr>
        <div>
            {{ modelValue }}
        </div>
        <button @click="changeSkills">Change v-model </button>
    </div>

    <div>
        Num value from parent {{ num }}
        <button @click="onNumChange">Change number</button>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
defineProps({
    name: String,
    email: String,
    num: Number
});

const modelValue = defineModel<string[]>();

const emitts = defineEmits(['update:name', 'update:email','update:modelValue','change:num'])

const changeSkills = () => {
    emitts('update:modelValue', modelValue.value?.map(item=> item + '_CHANGED') );
}

const onNumChange = () => {
    emitts('change:num',Math.random() * 100) 
}
</script>